<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> -->
    <title>全功能视屏播放器 By Febby315</title>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/purl/2.3.1/purl.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- player -->
    <script src="https://cdn.bootcss.com/hls.js/0.9.1/hls.min.js"></script>
    <script src="https://cdn.bootcss.com/flv.js/1.4.2/flv.min.js"></script>
    <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js"></script>
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <div id="body">
        <div style="text-align:center; color:#FAFAFA;">
            <select id="" @change="handleSelectChange">
                <option v-for="item,k in srcList" :value="item">{{k}}</option>
            </select>
            <input type="text" v-model="src" placeholder="请输入播放链接..." style="width:80%" />
            <input type="button" value="播放" @click="play" title="视频:支持http协议(m3u8/flv/mp4/webp/ogg/ogv)/rtmp协议(flv/f4v)" />
            <!-- /rtsp协议(ts/mp4)/socket -->
        </div>
        <div v-for="item,k in list" :id="item.id" ref="view" class="playerbox" v-key="k" @click="setTop(item)" @mouseover="item.butShow=true" @mouseout="item.butShow=false">
            <div class="button" v-show="item.butShow">
               <input type="button" value="X" @click="del(item)">
            </div>
            <div :id="'dv_'+item.id" class="video" style="width: 100%;height: 100%; display:none;" autoplay controls></div>
            <video ref="video" class="video" style="width: 100%;height: 100%;" autoplay controls>
                <source v-bind:src="item.src" :type="item.type||'video/mp4'">
            </video>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>

</html>